<template>
  <view>
    <u--form ref="uForm" :model="visitor" labelPosition="left" :rules="rules">
      <u-form-item label="姓名" prop="visitorName" borderBottom class="u-form-item">
        <u-input v-model="visitor.visitorName"
                 placeholder="请输入访客姓名" border="none"/>
      </u-form-item>
      <u-form-item label="手机号" prop="visitorPhoneNumber" borderBottom class="u-form-item">
        <u-input v-model="visitor.visitorPhoneNumber"
                 placeholder="请输入访客手机号" border="none"/>
      </u-form-item>
      <u-form-item label="到访日期" class="u-form-item">
        <picker mode="date" @change="handleDateChange">
          <view class="date-picker">
            <text v-if="!visitor.visitorDate" class="placeholder">请选择到访日期</text>
            {{ visitor.visitorDate }}
          </view>
        </picker>
      </u-form-item>
      <u-form-item label="备注" class="u-form-item">
        <textarea placeholder="请输入备注" v-model="visitor.remark" class="textarea-field"/>
      </u-form-item>
      <u-button type="primary" @click="submitForm" text="提交"/>
    </u--form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //表单验证
      rules: {
        'visitorName': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'visitorPhoneNumber': {
          type: 'number',
          required: true,
          message: '请填写手机号',
          trigger: ['blur', 'change']
        },
      },

      visitor: {
        communityId: "",
        visitorName: "",
        visitorPhoneNumber: "",
        visitorDate: "",
        remark: ""
      },
      show: false,
      columns: [],
    }
  },
  methods: {
    // 日期
    handleDateChange(event) {
      // 处理日期选择器变化
      this.visitor.visitorDate = event.mp.detail.value;
    },

    //提交
    submitForm() {
      this.$http.post('/uni-app/addZyVisitor', this.visitor).then(res => {
        if (res.data.code === 200) {
          wx.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 2000,
            success: () => {
              uni.switchTab({url:'/pages/index/index'})
            }
          });

        }
      });
    },

    fetchColumns() {
      this.$http.get('/uni-app/communities').then(res => {
        if (res.data.data) {
          console.log(res.data.data)
          this.columns = res.data.data;
          console.log(this.columns)
        }
      })
    },
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },

  created() {
    this.fetchColumns();
  },
}
</script>

<style>
/* 添加样式定义 */
.u-form-item {
  display: flex;
}

.u-form-item text {
  width: 180rpx;
}

.u-form-item input {
  margin-left: 50rpx;
}

.textarea-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px; /* 调整字体大小 */
  margin-left: 45rpx;
}

.date-picker {
  margin-left: 45rpx;
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.date-picker text {
  width: 100%;
}


.placeholder {
  color: #999;
}

</style>
